import React from "react"
import queryString from 'query-string'
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Fufeicss from "./style/index.module.css"
import img1 from "./img/返回1.png"
class Fufeijingpin extends React.Component {
    state = {

        imgHeight: 176,
        tuijiangedan: [],
        xindiexinge: [],
        xindiexinge2: [],
        yuncunjingxuanspan: [],
    }
    componentWillMount() {
        fetch('http://106.13.33.47:4000/dj/toplist/pay')
            .then(body => body.json())
            .then(res => {
                console.log(res.data.list[0].id)
                console.log(res.data.list[0].name)
                console.log(res.data.list[0].creatorName)
                console.log(res.data.list[0].picUrl)
                console.log(res.data.list[1])
                console.log(res.data.list[2])
                for (var i = 0; i < 13; i++) {
                    (this.state.tuijiangedan).push(res.data.list[i])
                    this.setState({
                    })
                }
            })
    }
    img1fanhui() {
        // this.props.history.goBack()
        this.props.history.push("/Diantai")
    }
    render() {
        let { tuijiangedan, xindiexinge, xindiexinge2, yuncunjingxuanspan, } = this.state
        return (
            <div>
                <div>
                    <img onClick={this.img1fanhui.bind(this)} className={Fufeicss.img1} src={img1} alt="" />
                </div>
                <div className={Fufeicss.div2div1}>
                    <ul>
                        {
                            tuijiangedan.map(item =>
                                <li className={Fufeicss.Litemli} key={item.id}>
                                    <img id={Fufeicss.Litemimg} src={item.picUrl} alt="" />
                                    <div className={Fufeicss.Litemspan}>
                                        <p className={Fufeicss.Litemspan12}>{item.name}</p>
                                        <p className={Fufeicss.Litemspan13}>{item.creatorName}</p>
                                        <p className={Fufeicss.Litemspan14}>最近上架</p>
                                    </div>
                                </li>
                            )
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
export default Fufeijingpin